<template>
  <el-form ref="form" :model="form" label-width="auto">
    <el-row :gutter="10">
      <el-col
        v-for="(item, index) in FormList"
        :key="item.prop"
        :span="item.span"
      >
        <el-form-item
          :label="item.label"
          :key="item.prop + index"
          v-if="showItem(item.show)"
          :prop="item.prop"
          :rules="item.rules"
        >
          <component
            :is="item.componentName"
            :config="item"
            :commonData="commonData"
            :modelValue.sync="form[`${item.prop}`]"
            @delete="deleteProp"
          ></component>
        </el-form-item>
      </el-col>
      <slot></slot>
    </el-row>
    <div style="margin-top: 10px; text-align: center">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button @click="diaClose">关 闭</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import NtInput from '@/components/nt-form/nt-input'
import NtSwitch from '@/components/nt-form/nt-switch'
import NtSelect from '@/components/nt-form/nt-select'
import { isFunction } from 'lodash'
export default {
  name: 'NtForm',
  components: { NtInput, NtSwitch, NtSelect },
  // @submit="submit"
  // @diaClose="diaClose"
  // :FormList="FormList"
  // :defData="defData"
  // 传参说明
  //   {
  //     componentName: 'NtInput',组件名
  //     span: 12,col宽度
  //     label: '占用列数',
  //     prop: 'zyls',
  //     textAreaConfig: 'textarea',textarea类型加上这个
  //     rules: [
  //       {
  //         required: true,
  //         message: '请输入占用列数',
  //         trigger: 'blur'
  //       }
  //     ],
  // show:(formData)=>{
  //   return formData?.hidden===true //显示条件
  // }
  //   }
  // {
  //   componentName: 'NtSwitch',
  //   span: 12,
  //   label: '首级代码',
  //   prop: 'sjdm',
  //   rules: [
  //     {
  //       required: true,
  //       message: '请选择首级代码',
  //       trigger: 'change'
  //     }
  //   ]
  // }
  //   {
  //     componentName: 'NtSelect',
  //     span: 24,
  //     label: '新增值策略',
  //     prop: 'xzzcl',
  //     selectList: getList,可为数组或者函数 函数需要return数组,
  //     show:(formData)=>formData?.value==='1'
  //   },
  props: {
    FormList: {
      type: Array,
      default: () => []
    },
    defData: {
      type: Object
    },
    commonData: {
      type: Object
    }
  },
  data () {
    return {
      form: {}
    }
  },
  mounted () {
    if (this.defData) {
      this.form = { ...this.defData }
    }
  },
  methods: {
    showItem (show) {
      return isFunction(show) ? show(this.form) : show ?? true
    },
    async submit () {
      await this.$refs.form.validate()
      this.$emit('submit', this.form)
    },
    diaClose () {
      this.$emit('diaClose')
    },
    deleteProp (prop) {
      // delete this.form[prop]
      this.$delete(this.form, prop)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
